import React, { useEffect, useState } from "react";
import { Table, Button } from "antd";
import axios from "axios";

const App2 = () => {
  // 表格数据
  const [data, setData] = useState([]);
  // 分页页码
  const [pageCode, setPageCode] = useState(3);
  // 数据总量
  const [totalCount, setTotalCount] = useState(0)
  // 列
  const columns = [
    {
      title: "店铺名称",
      dataIndex: "shopName",
    },
    {
      title: "店铺地址",
      dataIndex: "shopAddress",
    },
    {
      title: "店铺介绍",
      dataIndex: "shopDescription",
    },
    {
      title: "操作",
      render() {
        return (
          <div>
            <Button>添加</Button>
            <Button>编辑</Button>
            <Button>删除</Button>
          </div>
        );
      },
    },
  ];

  // 请求数据函数
  const _getData = async () => {
    axios.get("/api/list", { params: { pageCode } }).then((resp) => {
      const { totalCount, data } = resp.data.data;
      setData(data);
      setTotalCount(totalCount)
    });
  };

  // 副作用函数
  useEffect(() => {
    // 刚进来进行数据
    _getData();
  }, [pageCode] /* 页码发生改变， 重新请求数据 */);
  return (
    <div>
      <Table
        dataSource={data}
        columns={columns}
        pagination={{
          total: totalCount,
          current: pageCode,
          onChange(pageCode) {
            setPageCode(pageCode)
          }
        }}
      ></Table>
    </div>
  );
};

export default App2;
